<template>
  <el-card
    :header="title"
    style="margin: 20px auto;"
  >
    <ele-form
      ref="authorForm"
      v-model="authorFormData"
      :form-desc="authorFormDesc"
      :span="24"
      :is-show-label="false"
      :is-show-submit-btn="false"
      :is-show-back-btn="false"
      :before-request="handleBeforeRequest"
      :disabled="disabled"
    />
  </el-card>
</template>

<script>
import { JobTitle } from '@/utils/variable'

const authorFormData = {
  people: [
    {
      sign_order: 1,
      sex: '男',
      is_communicate_author: false,
      author_type: '本校老师',
      contribution_rate: 100
    }
  ]
}

export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => []
    },
    department: {
      type: Array,
      default: () => []
    },
    showContributionRate: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '作者信息'
    },
    authorName: {
      type: String,
      default: '作者'
    }
  },
  data() {
    var validateSignOrder = (rule, value, callback) => {
      var val = Number(value)
      if (isNaN(val) || !Number.isInteger(val) || val < 1) {
        callback(new Error('需要填写大于0的正整数'))
      } else {
        callback()
      }
    }
    var validateContribucationRate = (rule, value, callback) => {
      var val = Number(value)
      if (isNaN(val) || val < 0 || val > 100) {
        callback(new Error('需要填写大于0-100的数字'))
      } else {
        callback()
      }
    }
    return {
      isInit: true,
      originFormData: JSON.parse(JSON.stringify(authorFormData)),
      authorFormData: JSON.parse(JSON.stringify(authorFormData)),
      authorFormDesc: {
        people: {
          type: 'table-editor',
          label: '作者信息',
          attrs: {
            addBtnText: '添加' + this.authorName,
            isShowAdd: !this.disabled,
            isShowDelete: !this.disabled,
            tableAttrs: {
              border: true,
              fit: true,
              'header-cell-style': { background: '#f5f7fa' }
            },
            // 校检规则
            rules: {
              sign_order: [
                { required: true, message: '署名顺序必填' },
                { validator: validateSignOrder }
              ],
              author_type: { required: true, message: this.authorName + '类型必选' },
              name: { required: true, message: this.authorName + '姓名必填' },
              education: { required: true, message: '学历必选' },
              job_title: { required: true, message: '职称必选' },
              contribution_rate: [
                { required: this.showContributionRate, message: '贡献率必填' },
                { validator: validateContribucationRate, trigger: 'blur' }
              ]
            },
            // 表格列
            columns: [
              {
                prop: 'sign_order',
                label: '署名顺序',
                align: 'center',
                content: {
                  type: 'el-input',
                  attrs: {
                    size: 'small'
                  }
                }
              },
              {
                prop: 'author_type',
                label: this.authorName + '类型',
                align: 'center',
                width: 150,
                content: {
                  type: 'el-select',
                  attrs: {
                    size: 'small'
                  },
                  options: ['本校老师', '本校学生', '外校人员']
                }
              },
              {
                prop: 'name',
                label: this.authorName + '姓名',
                width: 150,
                align: 'center',
                // width: 150,
                content: {
                  type: 'el-input',
                  attrs: {
                    size: 'small'
                  }
                }
              },
              {
                prop: 'job_num',
                label: this.authorName + '职工号',
                align: 'center',
                width: 150,
                content: {
                  type: 'el-input',
                  attrs: {
                    size: 'small'
                  }
                }
              },
              {
                prop: 'sex',
                label: '性别',
                align: 'center',
                width: 100,
                content: {
                  type: 'el-select',
                  options: ['男', '女'],
                  attrs: {
                    size: 'small'
                  }
                }
              },
              {
                prop: 'education',
                label: '学历',
                align: 'center',
                width: 150,
                content: {
                  type: 'el-select',
                  options: ['博士研究生', '硕士研究生', '本科生', '大专生', '其它'],
                  attrs: {
                    size: 'small'
                  }
                }
              },
              {
                prop: 'job_title',
                label: '职称',
                align: 'center',
                width: 150,
                content: {
                  type: 'el-select',
                  options: JobTitle,
                  attrs: {
                    filterable: true,
                    size: 'small'
                  }
                }
              },
              {
                prop: 'is_communicate_author',
                label: '是否通讯作者',
                align: 'center',
                width: 100,
                content: {
                  type: 'el-select',
                  options: [
                    { text: '是', value: true },
                    { text: '否', value: false }
                  ],
                  attrs: {
                    size: 'small'
                  }
                }
              },
              {
                prop: 'department',
                label: '工作单位',
                align: 'center',
                width: 150,
                content: {
                  type: 'el-select',
                  options: this.department,
                  prop: { 'text': 'name', 'value': 'id' },
                  attrs: {
                    size: 'small'
                  }
                }
              },
              {
                width: 120,
                label: '贡献率',
                align: 'center',
                content: [
                  {
                    type: 'el-input',
                    valueKey: 'contribution_rate',
                    attrs: {
                      size: 'small'
                    },
                    style: {
                      width: '80px'
                    }
                  },
                  '%'
                ]
              }
            ],
            // 新行默认值
            newColumnValue: {
              sex: '男',
              is_communicate_author: false,
              author_type: '本校老师'
            }
          }
        }
      }
    }
  },
  watch: {
    data(newVal, oldVal) {
      this.authorFormData.people = newVal
      console.log(newVal)
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // if (this.disabled && this.data.length > 0) {
      if (this.data.length > 0) {
        this.authorFormData.people = this.data
      }
    },
    // 请求前的钩子，阻止请求并向父组件传递数据
    handleBeforeRequest(data) {
      this.$emit('getAuthorData', data)
      return false
    }
  }
}
</script>
